<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="root">
        <form action="">
            <p>姓名：
                <input type="text" name="name" v-model="msg.name">
            </p>
            <p>性别：
                <input type="radio" value="male" name="sex" v-model="msg.sex">男
                <input type="radio" value="female" name="sex" v-model="msg.sex">女
            </p>
            <p>爱好：
                <input type="checkbox" value="basketball" name="hobby" v-model="msg.hobby">篮球
                <input type="checkbox" value="singing" name="hobby" v-model="msg.hobby">唱歌
                <input type="checkbox" value="writeCode" name="hobby" v-model="msg.hobby">写代码
            </p>
            <p>职业：
                <select name="occupation" id="" v-model="msg.occupation">
                    <option value="boss">老板</option>
                    <option value="softwareEngineer">软件工程师</option>
                    <option value="lawyer">律师</option>
                    <option value="teacher">教师</option>
                </select>
            </p>
            <p>个人简介：
                <textarea rows="2" cols="15" name="intro" v-model="msg.intro"></textarea>
            </p>
            <p>年龄：
                <input type="text" name="age" v-model="msg.age">
            </p>
            <p>城市：
                <select name="city" id="" v-model="msg.city">
                    <option>请选择城市</option>
                    <option value="厦门">厦门</option>
                    <option value="龙岩">龙岩</option>
                    <option value="福州">福州</option>
                    <option value="漳州">漳州</option>
                </select>
            </p>
            <p>
                <input type="checkbox" v-model="msg.accept">同意协议
                <input type="submit" value="提交" @click.prevent="submit">
                <!-- <button @click.prevent="submit">提交</button> -->
            </p>

            <h2 v-show="this.x==2">您的个人信息是：</h2>
            <h2 v-show="this.x==2">
                用户名-{{this.msg.name}}，年龄-{{this.msg.age}}，性别-{{this.msg.sex}}，爱好-{{this.msg.hobby}}，职业-{{this.msg.occupation}}，自我介绍-{{this.msg.intro}},
                城市-{{this.msg.city}}
            </h2>
        </form>

    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data: {
                msg: {
                    name: '',
                    age: '',
                    sex: '',
                    hobby: [],
                    occupation: [],
                    intro: '',
                    city: [],
                    accept: '',
                },
                x: 1,
            },
            methods: {
                submit() {
                    if (this.msg.accept == true) {
                        return this.x = 2
                    }
                },

            },
        })




    </script>
</body>

</html>